<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compiled</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        class Timer extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    secondsElapsed : 0
                };
            }

            tick(){
                this.setState((prevState)=>({secondsElapsed:prevState.secondsElapsed+1}));
            }

            componentDidMount(){
                this.interval = setInterval(()=>this.tick(),1000);
            }

            componentWillUnmount(){
                clearInterval(this.interval);
            }

            render(){
                return (
                        <div>
                            <span>Seconds Elapsed:{this.state.secondsElapsed}</span>
                        </div>
                );
//                React.createElement('div',null,['Seconds elapsed:',this.state.secondsElapsed]);
            }
        }

        ReactDOM.render(
                React.createElement(Timer,null),
                document.getElementById('example')
        );
    </script>
</body>
</html>